:root{
   /* 继承 */
   --theme-color: #525252 !important;
   /* base color */
   --back-color: white;
   --font-color: black;
   --title-color: rgb(109, 177, 114);

   /* 特定组件 */
   --nav-color: var(--back-color);
   --nav-text-hover-color: #ffa724;
   --nav-background: #525252;
   --nav-item-background: #525252;
   --markdown-background: rgb(247, 247, 247);
}

/* 页面整体 */
body{
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 16px;
   color: #2c3e50;
}

/* 封面 */

/* 封面半透明遮盖 */
/* section.cover.has-mask .mask {
   background-color: var(--back-color);
   opacity: 0;
   position: absolute;
   top: 0;
   height: 100%;
   width: 100%;
} */



/* 优化导航栏 */
.app-nav a:hover {
   color: var(--nav-text-hover-color);
}

.app-nav > li > ul > li {
  margin: 10px 0;
  margin-right: 16px;
}

.app-nav > ul > li > ul > li {
  padding: 10px;
  margin: 0;
}

.app-nav > ul > li > ul > li:hover {
  background: var(--nav-item-background);
}

.app-nav > ul > li:hover > ul {
  min-width: 100px;
  display: flex;
  padding: 10px;
  color: var(--nav-color);
  background: var(--nav-background);
}

.app-nav li:hover > ul {
  overflow: visible;
}

.app-nav li:hover > ul > li {
  border-radius: 4px;
}

.app-nav li:hover > ul > li > ul {
  background: transparent;
}

.app-nav > ul > li > ul > li > ul {
  overflow: visible;
  position: initial;
  border: none;
}

.app-nav > ul > li > ul > li > ul > li {
  margin: 0;
  margin-bottom: 4px;
}


/* 解决2K下 markdown 的渲染显示问题 */

.markdown-section p, .markdown-section ul, .markdown-section ol {
   line-height: unset;
   word-spacing: 0.05rem;
}
.markdown-section figure, .markdown-section p {
   margin: 0.6em 0;
}


/* end */


.sidebar .sidebar-nav ul > li,
.sidebar .sidebar-nav > ul > li > a {
  font-weight: bold;
  font-size: 15px;
  color: #364149;
}

.hover-tip {
  display: inline-block;
  position: relative;
  padding: 0 4px;
  color: var(--theme-color);
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: var(--back-color);
  transition: all 0.2s;
}

.hover-tip:hover {
  border-bottom-color: var(--theme-color);
}

.hover-tip:hover .tip-box {
  transform: scale(1) translate(0, -2px);
  opacity: 1;
  max-height: 240px;
  padding: 1rem;
  transition: transform 0.2s, max-height 0.2s ease-in, opacity 0.2s;
  z-index: 999;
}

.hover-tip .tip-box {
  transform: scale(0) translate(100px, 100px);
  max-height: 0px;
  width: 240px;
  overflow: hidden;
  right: 0;
  bottom: 1.4rem;
  box-sizing: border-box;
  opacity: 0;
  border: 2px solid var(--theme-color);
  position: absolute;
  background: var(--back-color);
  transition: transform 0.2s;
}

.hover-tip > a {
  color: var(--back-color);
}

.tip-box > * {
  display: block;
}

.tip-box .no-margin {
  margin: 0;
}

.tip-box .tips-title {
  font-size: 1rem;
  margin: 0;
}

.tip-box .tips-content {
  word-break: break-all;
  color: #364149;
  font-weight: normal;
  font-size: 0.8rem;
}

video {
  width: 100%;
}

/* 查看原始文档 */
.go-origin-doc {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 100;
  background: var(--theme-color);
  color: var(--back-color);
  padding: 10px 20px;
  border-radius: 2em;
  filter: grayscale(0.6);
  opacity: 0.2;
  transition: all 0.4s;
}
.go-origin-doc:hover {
  opacity: 1;
  filter: grayscale(0);
}
.go-origin-doc a {
  color: var(--back-color);
  font-style: normal;
  text-decoration: none;
}



/* myStyle */
a {
   text-decoration: none;
   color: #3eaf7c
}
.badge.green[data-v-73ca276e], .badge.tip[data-v-73ca276e], .badge[data-v-73ca276e] {
   background-color: var(--theme-color);
}
.badge.warn[data-v-73ca276e], .badge.warning[data-v-73ca276e], .badge.yellow[data-v-73ca276e] {
   background-color: #e7c000;
}
.badge.recommendation[data-v-73ca276e] {
   background-color: #dd4a82;
}
.badge[data-v-73ca276e] {
   display: inline-block;
   font-size: 14px;
   height: 18px;
   line-height: 18px;
   border-radius: 3px;
   padding: 0 6px;
   color: var(--back-color);
}
/* 置顶插件 */
.to-top {
   display: none;
   padding: 10px 20px;
   margin-right: 10px;
   color: var(--back-color);
   border-radius: 10px;
   background-color: var(--theme-color);
}
/* 首页a标签置顶,不然无法点击 */
section.cover .cover-main {
   z-index:10 !important;
}
/* 导航栏 */
.app-nav {
   position: fixed !important;
}
/* 内容居中和宽度 */
.content{
   width:1000px;
   margin: 0 auto;
   padding-top: 70px !important;
}
/* 内容区域的字体颜色和背景 */
.markdown-section{
   /* background:var(--markdown-background); */
   /* color: rgb(184, 191, 198); */
   color: black;
   max-width: 90% !important;
   padding: 30px 30px 40px 30px !important;
   border-radius: 20px;
}
/* 行代码块 */
.markdown-section code {
   font-size: 14px;
   font-family: Consolas, monospace, serif;
   white-space: nowrap;
   padding: 0 4px;
   border-radius: 3px;
   background: var(--markdown-background);
   white-space: normal;
   color: rgb(173, 141, 229);
   
}


.sidebar ul {
   margin: 0 0 0 25px !important;
}
/* 侧边栏字体颜色 */
.sidebar ul li a {
   /* color: rgb(222, 222, 222); */
   font-weight: 600;
   font-size:16px;
}
.sidebar ul ul li a {
   /* color: rgb(184, 191, 198); */
   font-weight:400 !important;
   font-size:14px !important;
}
.sidebar ul li.active > a {
   color: var(--title-color);
} 

/* 侧边栏标题 */
.sidebar > h1 a{
   color: black
}
/* 侧边栏和内容分界线 */
.sidebar {
   border-right: 1px solid var(--markdown-background);
}

/* .sidebar-toggle{
   background-color: rgb(68,68,68) !important;
} */
h1{
   font-weight: bold !important;
   color:var(--back-color) !important;
}
h1 span{
   display:inline-block;
   background: var(--theme-color);
   color:var(--back-color) !important;
   padding:  10px  16px;
   border-radius:5px;
   box-shadow: 2px 2px 5px rgb(216, 216, 216);
}



/* ==========================
   markdown 内容渲染 
===========================*/

.markdown-section hr {
   border: none;
   border-bottom: 2px solid var(--markdown-background) !important;
   margin: 2em 0;
}
/* 标题颜色 */
.markdown-section h2 span, .markdown-section h3 span, .markdown-section h4 span,.markdown-section h5 span{
   /* color: rgb(222, 222, 222); */
   font-weight: bold;
}

/* 加粗 */
.markdown-section strong {
   color: rgb(115, 143, 205);
   font-weight: bolder;
}
/* a 标签 */
.markdown-section a {
   color: var(--title-color);
   font-weight: 500;
}
/* 表格 */
.markdown-section tr:nth-child(2n) {
   background-color: var(--markdown-background);
}
.markdown-section thead{
   background: var(--markdown-background) !important;
}

.markdown-section table {
   border-collapse: collapse;
   border-spacing: 0;
   margin-bottom: 1rem;
   display: table !important;
   overflow: auto;
   width: 100%;
}

/* 引用块 */
.markdown-section blockquote{
   background: rgb(220, 220, 255);
   padding:10px;
   border-radius:10px;
   margin: 1em 0;
}
.markdown-section blockquote p {
   margin: 0.2em 0;
}

/* 代码块 */
.markdown-section pre:before {
   content: '';
   display: block;
   background: url(https://files.mdnice.com/point.png);
   height: 0px;
   width: 100%;
   background-size: 40px;
   background-repeat: no-repeat;
   background-color: #282c34;
   margin-bottom: -7px;
   margin-top: 10px;
   margin-left: -3px;
   border-radius: 5px;
   background-position: 10px 10px;
}
/* 代码块 */
.markdown-section pre>code {
   color: #c0c3c1 !important;
   font-family: 'Inconsolata', consolas,"PingFang SC", "Microsoft YaHei", monospace !important;
   background-color: #282c34 !important;    
   font-size: 15px !important;
   white-space: pre !important;
   line-height: 1.5 !important;
   -moz-tab-size: 4 !important;
   -o-tab-size: 4 !important;
   tab-size: 4 !important;
   padding: 1em 5px;
}

/* 代码块 */

markdown-section code, .markdown-section pre {
   background-color: #282c34;
}
.token.directive.keyword{
   color: #4faee2 !important;
}
.token.keyword{
   color: #c678dd !important;
}
.token.comment{
   color: #737c8b !important;
}
.token.tag{
   color: #a589ad !important;
}
.token.attr-name{
   color: #de916c !important;
}
.token.attr-value{
   color: #4faee2 !important;
}
.token.macro.property{
   color: #4faee2 !important;
}
.token.function{
   color: #e6b456 !important;
}
.token.string{
   color: #98b755 !important;
}
.token.punctuation{
   color: #c0c3c1 !important;
}
.token.number{
   color:#c0c3c1  !important;
}
img, pre {
   border-radius: 8px;
}
